<template>
<div class="goodDetail" id="transitionName"> 
      <div class="goodDetailList">
        <div class="header" >
            <div class="left" @click="Return">
                <i class="iconfont icon-zuojiantou"></i>
            </div>
            <div class="in">商品分享</div>
            <div class="rigth"></div>
        </div>
            <div class="ff">
                <div class="thetop">
                    <div class="showbox" :freeScroll="true" :mouseWheel="true">
                        <ul class="sbimg" :style="'width:'+ num * 4 +'rem;'"> 
                            <li  v-for="(list,index) in goodDetail.goods_gallery_urls" :key="index"><img v-lazy="list" class=""></li>
                        </ul>
                    </div>
                    <div class="middle">
                        <div class="sbtitle"><span class="pin">拼</span>{{goodDetail.goods_name}}</div>
                    <div class="zhekou_l fl">
                        <span class="price">￥{{goodDetail.g_quanhou/100}}</span>
                        <span class="tip">券后价</span>
                        <span class="price_old">原价￥{{goodDetail.min_group_price/100}}</span><br>
                    </div>
                    <div class="zhekou_r fr">
                        已拼{{goodDetail.sold_quantity}}单                        
                    </div>
                    <div class="clear"></div>
                    <div class="lingquan">
                    <div class="quan_l fl">
                        <p class="fl">{{goodDetail.coupon_discount/100}}元</p>
                    </div>
                    <div class="quan_r fr">
                        <p class="">预计赚{{goodDetail.g_zhuansheng}}元</p>
                    </div>
                </div>
                </div>    
                <div class="detail">                
                <div class="tuijian">
                        <textarea name="" v-model="key" id="copyObj" cols="48" rows="4"></textarea>
                </div>
                </div>
                <div class="goodDetailFooter">
                    <div class="rigth">
                        <p>———— 分享 ————</p>
                        <div v-if="hide" class="tishi">
                            <p>复制成功了哟~</p>
                        </div>                        
                        <div data-v-4eb8d02a="" id="target" class="qrcode">
                             <canvas id="canvas"  width="800" height="1486" ></canvas>
                        </div>          
                        <div class="add"  @click="fuzhi()">
                            <img src="/static/img/circle_word.png" alt="">
                            <a href="javascript:void(0);">{{goodDetail1.g_zhuansheng}}<br>复制文章</a>
                        </div>
                        <div class="add">
                            <img src="/static/img/circle_wechart.png" alt="">
                            <a href="javascript:void(0);" @click="pay()">{{goodDetail1.g_zhuansheng}}<br>微信</a>
                        </div>
                        <div class="add">
                            <img src="/static/img/circle_friend.png" alt="">
                            <a href="javascript:void(0);" @click="draw()">{{goodDetail1.g_zhuansheng}}<br>保存朋友圈图片</a>
                        </div>
                    </div>
                    <div class="clear"></div>                    
                </div>                
            </div>
      </div>
  </div>
</div>
</template>
<script >
import { Toast,MessageBox,Navbar,TabItem,TabContainer,TabContainerItem } from "mint-ui";
import { mapGetters, mapMutations } from "vuex";
import BScroll from 'better-scroll';
import axios from "axios";
import Vue from 'vue';
import zhuan from "../assets/zhuan.js";
Vue.use(zhuan);
export default {
  name: "toshare",
  data() {
    return {
        goodDetail: [],
        hide:false,
        key:"",
        num:0,
        isReady:false,
        goodDetail1: {}
    };
  },
  filters: {
      formatDate(time) {
        var date = new Date(time*1000);
        return formatDate(date, 'yyyy-MM-dd');
        }
    },
  mounted() {
    var _this = this;
    var num =this.$route.query.id;
    this.getData(num)
  },
  created() {
    var _this = this;
    var num =this.$route.query.id;
  },
  methods: {
      draw:function(){
            var that = this;
            var _this = this;
             // 名称的宽度
            var lineWidth = 0;
             //截取的字符串的索引值
            var lastIndex = 0;
            var height = 10;
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');  //获取对应的2D对象(画笔)
            var img=new Image();
            var bgimg=new Image();
            img.crossOrigin="anonymous";
            bgimg.crossOrigin="anonymous";
            img.src=_this.goodDetail.goods_thumbnail_url
            bgimg.src="./static/img/bg_canvas.png"
            var str =_this.goodDetail.goods_name;
            var qh=_this.goodDetail.g_quanhou/100;
            var yj=_this.goodDetail.min_group_price/100;
            var quan=_this.goodDetail.coupon_discount/100;  
            var quantity=_this.goodDetail.sold_quantity;                  
             
            context.fillStyle = '#000';
            context.strokeStyle = '#000'; //设置笔触的颜色
            context.font = "38px 黑体"          
            context.fillStyle = '#ff4040';           
            //下载图片
            bgimg.onload = function(){
                context.drawImage(bgimg,0,0,canvas.width,canvas.height);
                for (var i = 0; i < str.length; i++) {               
               lineWidth += context.measureText(str[i]).width;// ctx.measureText 返回包含指定文本宽度的对象
               // 超出宽度截取, 绘制到canvas上
               if (lineWidth > 650) {
                  that.drawFont(context, str.substring(lastIndex, i),50);                
                  height += 32; // 在height = 875的基础上在加上行高
                  lineWidth = 0;                
                  lastIndex = i; // 保存最后一个索引值, 剩余部分从 i 开始
               }
               // 剩余部分再一次绘制
               if (i == str.length - 1) {
                  that.drawFont(context, str.substring(lastIndex, i + 1), 115);
               }
            }
                context.drawImage(img,0,360,800,800);
                context.fillStyle = '#ff4040';
                context.fillText('券后价：￥'+qh ,300 ,195); //设置文本内容
                context.fillStyle = '#898989';
                context.font = "26px 黑体"   
                context.fillText('原价：￥'+yj,210,279);
                context.fillStyle = '#fff';
                context.fillText(quan+'福利券',440,279);
                context.fillStyle = '#ff4040';
                context.font = "38px 黑体"  
                context.fillText('领'+quan+'元福利券',460,1310);
                context.fillStyle = '#000';
                context.font = "28px 黑体" 
                context.fillText('微信内长按识别小程序码',430,1370);
                context.fillText('已成功拼'+quantity+'单',430,1430);
                that.isReady=true;
                that.saveImg();
                }
      },
      
    // 将canvas生成的图片保存
    saveImg() {
            var canvasData = document.getElementById("canvas");
            var a = document.createElement("a");
            a.href = canvasData.toDataURL();;
            a.download = "drcQrcode";
            a.click();
    },
       drawFont: function (context, content, height) {
        var that = this;
        context.font = "38px 黑体"
        context.fillStyle = '#000';
        context.fillText(content, 80, height);
    },   
      getData:function(num){
        var _this=this
        var sbimg = document.getElementsByClassName("sbimg");        
        axios.get(
            "/api/common/goodspdd/getlink",
            {
                params: {
                    num_iid:num
                    }
            }
        ).then(function(res){
            console.log(res.data.goods_promotion_url_generate_response.goods_promotion_url_list[0])      
            _this.goodDetail=res.data.goods_promotion_url_generate_response.goods_promotion_url_list[0].goods_detail
            _this.goodDetail1=res.data.goods_promotion_url_generate_response.goods_promotion_url_list[0]
            _this.key=_this.goodDetail.goods_name+"\n"+"【抢"+_this.goodDetail.coupon_discount/100 +"元券】原价"+_this.goodDetail.min_group_price/100 +"，券后"+_this.goodDetail.g_quanhou/100 +"元包邮"+"\n"+"购买链接："+_this.goodDetail1.short_url;
            _this.num=_this.goodDetail.goods_gallery_urls.length
        })
    },
    Return() {
        this.$router.go(-1)
     },
    //返回上一级
    fanhui: function() {
      this.$router.go(-1);
    },
    fuzhi: function() {
        var _this=this
        let url = document.querySelector('#copyObj');
        url.select(); // 选择对象
        document.execCommand("Copy");
        _this.hide=true;
        setTimeout(() => { 
            _this.hide=false;
        }, 1000)
    },
    hidden:function(){
        var _this=this
        _this.hide=false;
    }
  }
};
</script>

<style lang="stylus" >
#canvas{
    display none
}
.middle{
    background-color #fff
    margin-bottom .1rem
    padding-top .1rem
    height 25%
    padding-bottom .6rem 
}
textarea{
    border 1px #000 solid
    border-radius .2rem
    padding .28rem
    font-size .36rem
    line-height .66rem
    word-break:break-all;
    width 9rem
}
.tishi{
    width 2.8rem
    height 1.5rem
    background-color rgba(0,0,0,0.7)
    font-size .3rem
    line-height 1.5rem
    border-radius .13rem
    position fixed
    bottom 43%
    left 38%
    color #fff
}
.showbox{
    width 100%
    height 25%
    display inline-block
    overflow-x: scroll;
    overflow-y: hidden;
}
.sbimg{
    // width 500%
    overflow-x: scroll;
}
.sbimg li{
    float left
}
.sbimg li img{
    width 4rem
}
.clear{
    clear both
}
 .header
        width 100%
        height 1.1rem
        z-index 1
        position fixed
        background #ff4040
        color #fff
       
        .in
            width 60%
            height 100%
            line-height 1.1rem
            float left
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
            text-align center
            font-size 0.45rem
        .left
            width 10%; 
            height 100%
            float left
            i 
                font-size: 0.6rem;
                line-height: 1.1rem;
                text-align: center;
                display: block;
        .rigth
            width 10%; 
            height 100%
            float left
.thetop{
    padding-top 1.1rem
    padding-bottom 1rem
    margin-bottom .2rem
    // background-color #fff
}
.sbtitle{
    font-size .36rem
    padding 0 .24rem
    margin-top .5rem
    margin-bottom .4rem
    line-height .55rem
    white-space nowrap
    overflow hidden
    text-overflow ellipsis
}
.sbtitle .pin{
    background-color #ff4040
    padding 0 .3rem
    color #fff
    border-radius .2rem
    margin-right .2rem
}
.zhekou_l,.zhekou_r{
    font-size .3rem
    color #898989
    padding-left .2rem
    padding-right .4rem
    line-height .6rem
}
.zhekou_l .price{
    color #ff4040
    font-size .55rem
    vertical-align middle
}
.zhekou_l .tip{
    display inline-block
    width 1.4rem
    height .5rem
    color #fff
    border-radius .1rem
    padding-left .2rem
    margin 0 .2rem
    line-height .45rem
    background center url("/static/img/bg_ticket_text.png") 
    background-size cover
}
.lingquan{
    width 94%
    margin 0 auto   
    font-size .2rem
    color #333
    line-height .7rem
    text-align center
    margin-bottom 1rem
    margin-top .35rem
}
.quan_l {
    height .8rem
    width 1.82rem    
    background center url("/static/img/bg_ticket.png") 
    background-size contain
    border-radius .1rem
    padding-left .83rem  
    text-align center
        
}
.quan_r{
    font-size .38rem
    color #ff4040
}
.detail{
    background-color #fff
    padding .2rem 0
    height 25%
}
.tuijian{
    width 89%
    margin 0 auto
    background-color rgba(0,0,0,0.04)
    // height 2rem
    font-size .3rem
    line-height .45rem
    margin-top .3rem
}
.tuijian_tip{
    display inline-block
    padding 0 .2rem
    color #fff
    border-radius .2rem
    background-color #ff4040
    margin 0 .2rem
}
img{
    width 100%
}
.peizhi {
    width: 90%;
    margin: auto;
    div{
        margin-bottom .5rem;
        margin-top .5rem;
    }
    h3 {
        height: 2rem;
        line-height: 2.3rem;
        font-size: 0.5rem;
        border-bottom: 1px solid #ccc;
    }
    span {
        font-size: 0.38rem;
        color: #888;
        margin-top: .3rem;
        display: block;
    }
    p {
         height .55rem
        color: #888;
    }
}

.goodDetaiSwipe {
    height: 8rem;
    margin-top: 3px;
    background: white;
}

.goodDetaiSwipe img {
    width: 70%;
    height: 7rem;
    display: block;
    /* margin-top: 60px; */
    margin: auto;
}


.goodDetailFooter {
    position: fixed;
    width: 100%;
    bottom: 0rem;
    background-color #fff
    height: 24%;
    padding-top .4rem
    // paddong-bottom 1 rem
    border-top: 1px solid #efefef;
    .rigth {
        // width: 65%;
        // float: right;
        font-size .4rem
        
        text-align center
        p{
            margin-bottom .3rem
        }
        .add {
            float: left;
            width 33%
            margin-bottom .3rem
            margin-top .2rem
            img{
                width 1.3rem
            }
            a {
                display: block;
                // width: 40%;
                height: .85rem;
                line-height: .38rem;
                text-align: center;
                // background: #000;
                color: #333;
                font-size: 0.36rem;
                // float: left;
                border-radius .16rem
            
            }
        }

        .purchase {
            a {
                border-radius .16rem
                float: right ;
                margin-right .3rem
                display: block;
                width: 40%;
                height: .85rem;
                line-height: .38rem;
                text-align: center;
                color: white;
                font-size: 0.16rem;
                background: #ff4040;
            }
        }
    }
}


.goodDetailImg {
    margin-top: 4px;
    margin-bottom: 6px;
}

</style>
